<template>
  <div class="wrapper">
  <el-container>
    <el-header class="homeHeader">
      <com-header></com-header>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(35, 35, 35)">
        <com-sidebar class="sidebar"></com-sidebar>
      </el-aside>
    <el-main>
         <div class="main"
             :style="{left: collapse ? '64px' : '200px'}">
          <com-tags></com-tags>
          <keep-alive :include="tagComponent">
        </keep-alive>
        </div> 
          <div v-if="this.$router.currentRoute.path == '/Home'"><com-Main class="Main"></com-Main></div>
          <router-view class="main-cont"></router-view> 
     </el-main>
    </el-container>
  </el-container>
   </div>
</template>

<script>
import comHeader from './Header.vue'
import comSidebar from './Sidebar.vue'
import comTags from './Tags.vue'
import comMain from './Main'
import Bus from './bus'
export default {
  name: 'Home',
  components: { comHeader, comSidebar, comTags, comMain },
  data() {
    return {
      collapse: false,
      tagComponent: [],
    }
  },
    computed: {
    routes() {
      return this.$store.state.routes
    },
  },
  created() {
    Bus.$on('collapse', (isCollapse) => {
      this.collapse = isCollapse
    })
    // 只有在标签页列表里的页面才使用keep-alive，关闭标签之后就不保存到内存中了
    Bus.$on('tags', (tagList) => {
      for (let item of tagList) {
        item.name && this.tagComponent.push(item.name)
      }
    })
  },
}
</script>
<style scoped lang="less">
.wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #eee;
    overflow-y: auto;
}
.homeHeader {
  background: #393d49;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  height: 50px !important;
}
.sidebar,
.main {
  position: absolute;
  top: 30px;
  bottom: 0;
  margin-top:20px;
}
.main {
  left: 200px;
  right: 0;
  padding: 20px;
  overflow: auto;
  transition: left 0.3s ease-in-out;
}
.main-cont {
  margin-top: 40px;
}
</style>
